<template>
  <div v-loading="isLoading" class="infoDialog">
    <ContentWrap>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="订单信息" name="orderInfo">
          <order-detail v-if="activeName === 'orderInfo' && Object.keys(orderInfo).length" :order-info="orderInfo" />
        </el-tab-pane>
        <el-tab-pane label="产品信息" name="proInfo">
          <pro-detail v-if="activeName === 'proInfo'" :product-info="productInfo" />
        </el-tab-pane>
        <el-tab-pane label="结算信息" name="settleInfo">
          <settle-detail v-if="activeName === 'settleInfo'" :order-info="orderInfo" />
        </el-tab-pane>
      </el-tabs>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import orderDetail from './orderDetail'
import proDetail from './proDetail'
import settleDetail from './settleDetail'
import { getRetailDetail } from '@/api/topInfo'
import { parseTime } from '@/utils/'
export default {
  name: 'ShopRetailDetail',
  components: {
    ContentWrap,
    orderDetail,
    proDetail,
    settleDetail
  },
  data() {
    return {
      isLoading: false,
      activeName: 'orderInfo',
      orderInfo: {},
      productInfo: {}
    }
  },
  created() {
    const { saleOrderCode } = this.$route.query
    if (saleOrderCode === '') {
      return
    }
    this.getRetailOrederDetail(saleOrderCode)
  },
  mounted() {
  },
  methods: {
    /**
     * 获取零售订单详情
     */
    getRetailOrederDetail(saleOrderCode) {
      this.isLoading = true
      getRetailDetail(saleOrderCode).then(async(res) => {
        if (res.success === 1) {
          const dataInfo = { ...res.data }
          dataInfo.formmakerTime = parseTime(dataInfo.formmakerTime, '{y}-{m}-{d}')
          dataInfo.lastModifiedTime = parseTime(dataInfo.lastModifiedTime, '{y}-{m}-{d}')
          dataInfo.fristAppointmentTime = parseTime(dataInfo.fristAppointmentTime, '{y}-{m}-{d}')
          dataInfo.arrangeAppointmentTime = parseTime(dataInfo.arrangeAppointmentTime, '{y}-{m}-{d}')
          dataInfo.deliveryAddress = `${dataInfo.provinceName ? dataInfo.provinceName : ''}` +
                                      `${dataInfo.cityName ? dataInfo.cityName : ''}` +
                                      `${dataInfo.countyName ? dataInfo.countyName : ''}` +
                                      `${dataInfo.streetName ? dataInfo.streetName : ''}` +
                                      `${dataInfo.deliveryAddress ? dataInfo.deliveryAddress : ''}`
          this.orderInfo = dataInfo
          if (res.data.items) this.productInfo = [...res.data.items]
          this.$nextTick(() => {
            this.isLoading = false
          })
        }
      })
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.infoDialog {
  width: 100%;
  height: 100%;
  .content-wrap {
    widows: 100%;
    height: 100%;
    background: #FFFFFF;
  }
}
</style>
